import BaseView from "../baseView.js";

//显示学生列表的界面
export default  class ShowstudentListView extends BaseView{
    
    constructor(){
        super();
        this.init();
    }

     render(){
        $("#showContent").html(
            `
            <h1>学生列表</h1>
            <hr/>
            <table id="showdata" lay-filter="test"></table>
            `
        )
     }

     handle(){
       //添加js工具栏代码
     $("script[type='module']").after(
        `<script type="text/html" id="barDemo">
         <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
         <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
         </script>
        `
     )
         
        //加载layui的table模块
        layui.use(['table'], function(){
            //使用 tabale模块
            var table = layui.table;
            //渲染表格
            table.render({
                //数据在哪里渲染
                elem: '#showdata'
                //数据接口
                ,url: '/api/student/getstudentbypage'
                ,page: true //开启分页
                //修改layui的默认分页参数
                ,request: {
                    pageName: 'curpage' //页码的参数名称，默认：page 默认： 1
                    ,limitName: 'pagesize' //每页数据量的参数名，默认：limit：10
                  }
                  //修改每页显示的条数
                  ,limit:3
                  //修改layui的数据返回格式
                  ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                      "code": res.code, //解析接口状态
                      "msg": "查询成功", //解析提示文本
                      "count": res.tolNum, //解析数据长度 总条数 
                      "data": res.datas //解析数据列表  需要显示的数据
                    }}
                ,cols: [[ 
                    //表头 field：对应你返回对象的属性(键名)
                    //title：在表格中显示的列名
                   {field: 'name', title: '姓名'}
                  ,{field: 'gender', title: '性别'}
                  ,{title:'操作', toolbar: '#barDemo', width:150}
                  
                ]]
              });
        //监听行工具事件
         table.on('tool(test)', function(obj){
            //console.log("obj****",obj)
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
              layer.confirm('真的删除行么', function(index){
                //发送ajax的请求
                $.ajax({
                  type:"delete",
                  url:`/api/student/deletestudent/${obj.data._id}`,
                  dataType:"json",
                  success:(data)=>{
                    //console.log(data);
                    if(data.code==0){
                     alert(data.msg);
                     //重新加载表格
                      table.reload("showdata");
                    }
                  }
        

                });
                layer.close(index);
              });
            } else if(obj.event === 'edit'){
                  //跳转到编辑页面
                  window.location.href=`#/main/findstudentDetail/${obj.data._id}`
            }
          });

         });
         
     }
}